<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超级市场 - 一站式购物体验</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <link rel="stylesheet" href="styles/index-ai.css">
    <link rel="icon" href="/photo/Profile picture/log.ico" type="image/x-icon">
    <link rel="stylesheet" href="/styles/coupons-ai.css">
</head>

<body>
    <main id="app">
        <!-- 导航栏 -->
        <header>
            <nav>
                <div class="logo-container">
                    <img src="/photo/Profile picture/logo.png" alt="超市Logo" class="logo">
                    <div class="brand-name">超级<span>市场</span></div>
                </div>

                <div class="hamburger" @click="toggleMenu">
                    <i class="fas fa-bars"></i>
                </div>

                <ul class="nav-links" :class="{ active: menuOpen }">
                    <li><a href="index-ai.html" class="active"><i class="fas fa-home"></i> 首页</a></li>
                    <li><a href="order.html"><i class="fas fa-shopping-bag"></i> 我的订单</a></li>
                    <li><a href="cart.html"><i class="fas fa-shopping-cart"></i> 购物车</a></li>
                    <li><a href="activityCenter.html" ><i class="fas fa-tags"></i> 优惠活动</a></li>
                    <li class="user-info">
                        <div class="user-avatar">
                            <img :src="userAvatarUrl" alt="用户头像">
                        </div>
                        <span class="user-name" @click="handleUserClick">{{ username }}</span>
                        <div class="avatar-dropdown" v-if="username !== '请登录'">
                            <a href="/profile.html" target="_blank" class="dropdown-item">
                                <i class="fas fa-user"></i> 个人信息
                            </a>
                            <a href="#" @click.prevent="logout" class="dropdown-item">
                                <i class="fas fa-sign-out-alt"></i> 退出
                            </a>
                        </div>
                    </li>
                </ul>
            </nav>
        </header>

        <!-- 搜索框部分 -->
        <section class="search-section">
            <div class="search-container">
                <div class="search-box">
                    <input type="text" id="searchInput" v-model="searchKeyword" placeholder="搜索商品...">
                    <button id="searchButton" @click="searchProducts">
                        <i class="fas fa-search"></i> 搜索
                    </button>
                </div>
            </div>
        </section>

        <!-- 轮播图部分 -->
        <section class="carousel-section" v-if="showCarouselAndTitle">
            <div class="carousel-container" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
                <div class="carousel-wrapper">
                    <div v-for="(item, index) in carouselItems" :key="index" class="carousel-slide"
                        :class="{ active: index === carouselCurrentIndex }">
                        <img :src="item.imageUrl" alt="slide" style="width:100%; height:100%; object-fit: contain;">
                        <div class="slide-content">
                            <h2>{{ item.title }}</h2>
                            <p>{{ item.description }}</p>
                        </div>
                    </div>
                </div>
                <button class="carousel-btn prev" @click="prevSlide">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="carousel-btn next" @click="nextSlide">
                    <i class="fas fa-chevron-right"></i>
                </button>
                <div class="carousel-dots">
                    <span v-for="(item, index) in carouselItems" :key="index" class="dot"
                        :class="{ active: index === carouselCurrentIndex }" @click="goToSlide(index)"></span>
                </div>
            </div>
        </section>

        <div class="section-header" v-if="showCarouselAndTitle">
            <h2 class="section-title">精选商品</h2>
            <p class="section-subtitle">我们为您精心挑选了最新鲜、最优质的商品，满足您的一站式购物需求</p>
        </div>
        <!-- 商品区域 -->
        <section class="menu-section">
            <div class="menu-categories" v-if="showCarouselAndTitle">
                <button class="category-btn" :class="{active: activeCategory === 0}" @click="filterCategory(0)"
                    data-id="0">全部</button>
                <button v-for="category in categories" :key="category.classifyId" class="category-btn"
                    :class="{ active: activeCategory === category.classifyId }"
                    @click="filterCategory(category.classifyId)">
                    {{ category.classifyName }}
                </button>
            </div>

            <div class="menu-items">
                <div v-if="loading" class="loading">
                    <i class="fas fa-spinner fa-spin"></i> 正在加载商品...
                </div>

                <div v-else-if="products.length === 0" class="loading">
                    没有找到相关商品
                </div>
                <div v-else v-for="product in products" :key="product.id" class="menu-item">
                    <span v-if="product.isHot" class="badge">热卖</span>
                    <span v-else-if="product.isNew" class="badge">新品</span>

                    <a :href="'product-comment.html?commodityId=' + product.commodityId" target="_blank">
                        <img :src="product.image" :alt="product.commodityName" style="width:100%; height:60%; object-fit: contain;">
                        <div class="item-info">
                            <h3>{{ product.commodityName }}</h3>
                            <p>{{ product.commodityDesc }}</p>
                            <div class="price">
                                <span class="price-tag">¥{{ product.commoditySalePrice.toFixed(2) }}</span>
                                <button class="add-to-cart" @click.prevent="addToCart(product)">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </section>

        <!-- 购物车成功提示弹窗 -->
        <!-- <div class="modal">
            <div class="modal-content success-modal">
                <div class="modal-body">
                    <div class="success-icon">✓</div>
                    <div class="success-message">成功加入购物车</div>
                    <button class="btn-modal" @click="goToCart">去购物车</button>
                </div>
            </div>
        </div> -->
         <div v-if="showCouponModal" class="coupon-modal-overlay">
            <div class="coupon-modal">
                <div class="coupon-modal-header">
                    <h3>新人专属优惠券</h3>
                    <button class="close-button" @click="closeCouponModal">&times;</button>
                </div>
                <div class="coupon-modal-body">
                    <p>欢迎新用户！</p>
                   <!-- 复用管理页的样式结构和字段 -->
                    <div class="coupon-item" v-if="newUserCoupon">
                        <div class="coupon-value">
                            ¥<span>{{ newUserCoupon.couponPrice }}</span>
                        </div>
                        <div class="coupon-details">
                            <h3>{{ newUserCoupon.couponName }}</h3>
                            <p class="coupon-condition">满{{ newUserCoupon.couponCondition }}元可用</p>
                        </div>
                        <div class="coupon-status">
                            <span :class="['status-tag', getStatusClass(newUserCoupon.couponStatus)]">
                                {{ getStatusText(newUserCoupon.couponStatus) || '未领取' }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="coupon-modal-footer">
                    <button class="btn-primary" @click="sendNewUserCoupon">领取</button>
                </div>
            </div>
        </div>
    </main>

    <script src="/js/index-ai.js"></script>
</body>

</html>